html,
body {
  background: url("../images/bg.jpg") no-repeat top center;
  min-width: 1280px;
  font: 14px/1.5 "Microsoft YaHei", Tahoma, "simsun", sans-serif;
  color: #323235;
}

/* 通用类 */
.fl {
  float: left;
}

.fr {
  float: right;
}

.container {
  width: 1200px;
  margin: 0 auto;
}

.icon {
  display: inline-block;
  background: url("../images/spr_block.png") no-repeat;
  width: 24px;
  height: 24px;
  /* 行盒的对齐方式 */
  vertical-align: middle;
}

/* 头部 */
#header {
  width: 100%;
  height: 84px;
  background: rgba(0, 0, 0, 0.8);
  color: #c9c9dd;

  .header-nav {
    width: 100%;
    height: 100%;

    .header-inner {
      height: 100%;

      .logo {
        a {
          display: block;
          width: 200px;
          height: 54px;
          background: url("../images/logo.png") no-repeat;
          text-indent: -999px;
          margin-top: 16px;
        }
      }

      .main-nav {
        height: 100%;
        margin-left: 36px;

        li {
          float: left;
          width: 110px;
          height: 100%;
          text-align: center;
          line-height: 30px;
          font-size: 18px;

          a {
            display: block;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding-top: 20px;
          }
          span {
            display: block;
            font-size: 12px;
          }
        }

        li.active,
        li:hover {
          color: #e4b653;
          background: url("../images/spr_block.png");
        }
      }

      .login {
        margin-top: 21px;
        cursor: pointer;

        img {
          width: 44px;
          height: 44px;
          border: 1px solid #d9ad50;
          border-radius: 50%;
          box-sizing: border-box;
        }
        div {
          margin-left: 10px;

          .welcome {
            font-size: 16px;
            color: #fff;
          }

          .description {
            color: #858792;
          }
        }
      }
    }

    #sub-nav {
      height: 285px;
      background: rgba(0, 0, 0, 0.7);
      height: 0;
      overflow: hidden;
      transition: 0.3s;

      .menus {
        margin-left: 346px;
        line-height: 30px;
        text-align: center;
        padding-top: 15px;

        li {
          float: left;
          width: 110px;

          a {
            display: block;
            /* 强制不换行 */
            white-space: nowrap;
          }

          a:hover {
            color: #f3c258;
            text-decoration: underline;
          }

          .n {
            background-position: -137px -68px;
          }

          .h {
            background-position: -160px -66px;
          }

          .o {
            background-position: -136px -4px;
          }

          .lock {
            background-position: -137px -35px;
          }
        }
      }
    }
  }

  .header-nav:hover #sub-nav {
    height: 285px;
  }
}

/* 进入专题 */
.special {
  display: block;
  height: 440px;
  margin-top: 6px;
  margin-bottom: 6px;
}

/* 主体区域 */
.main {
  height: 342px;
  background: url("../images/rotate_bg.png") no-repeat;
  color: #b1b2be;

  .banner {
    width: 604px;
    height: 100%;
    overflow: hidden;

    .banner-img {
      width: 500%;
      height: 298px;

      li {
        float: left;
        width: 604px;
        height: 100%;

        a,
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }

    .banner-title {
      height: 44px;

      li {
        float: left;
        width: 20%;
        line-height: 44px;
        text-align: center;
        cursor: pointer;

        &.active {
          color: #f3c258;
          background: rgba(255, 255, 255, 0.15);
        }
      }
    }
  }

  .news {
    width: 325px;
    height: 342px;
    padding: 0 17px;

    .news-title {
      height: 49px;
      border-bottom: 1px solid #000;

      li {
        float: left;
        width: 52px;
        line-height: 49px;
        text-align: center;
        cursor: pointer;

        &.active {
          border-bottom: 3px solid #f3c258;
          color: #f3c258;
        }
      }
    }

    .news-banner {
      margin-top: 2px;
      overflow: hidden;

      .news-blocks {
        width: 500%;
        transition: 0.3s;

        .newslist {
          float: left;
          width: 325px;

          li {
            margin-bottom: 11px;
            overflow: hidden;

            &:first-child {
              width: 294px;
              height: 36px;
              line-height: 36px;
              padding: 0 15px;
              margin-top: 18px;
              text-align: center;
              color: #f3c258;
              background: #414046;
              font-size: 18px;

              a {
                display: block;
                float: none;
                width: 100%;
              }
            }
          }
        }
      }
    }
  }

  .downloads-area {
    width: 236px;
    height: 100%;

    .download {
      width: 236px;
      height: 128px;
      background-position: 0 -219px;
    }

    .vs {
      width: 236px;
      height: 107px;
      background-position: 0 -350px;
    }

    .exp {
      width: 236px;
      height: 107px;
      background-position: 0 -461px;
    }
  }
}

/* 广告区域 */
.ad {
  margin-top: 28px;
  margin-bottom: 34px;
  height: 134px;

  a {
    float: left;
    margin-right: 12px;
    width: 291px;
    height: 100%;
    overflow: hidden;

    &:last-child {
      margin-right: 0;
    }

    img {
      transition: 0.3s;
    }

    &:hover img {
      transform: scale(1.1);
    }
  }
}

/* 底部 */
.footer {
  height: 362px;
  background: url("../images/bg_footer.jpg");
  padding-top: 80px;
  box-sizing: border-box;

  .footer-logo {
    border-bottom: 2px solid #d4d4d4;

    a {
      display: block;
      width: 255px;
      height: 46px;
      background: url("../images/spr.png") no-repeat -1px -12px;
      margin-bottom: 10px;
    }
  }

  .footer-links {
    margin-top: 12px;
    font-size: 12px;
    color: #666;

    .footer-left-links {
      width: 525px;

      span {
        margin-right: 12px;
      }
    }

    .footer-right-links {
      width: 630px;
    }

    p {
      margin-top: 12px;
      margin-bottom: 12px;
    }
  }
}

/* 登录遮罩区域 */
.login-area {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
  display: none;

  .login-container {
    width: 530px;
    height: 254px;
    background: url("../images/loginform.jpg");
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    a {
      position: absolute;
    }

    .weixin {
      width: 197px;
      height: 46px;
      top: 143px;
      left: 60px;
    }

    .qq {
      width: 197px;
      height: 46px;
      top: 143px;
      left: 272px;
    }

    .close {
      width: 40px;
      height: 40px;
      top: 0;
      right: 0;
    }
  }
}

.right-nav {
  width: 254px;
  height: 494px;
  position: fixed;
  right: 0;
  top: 50%;
  background: url("../images/r_navBg.png");
  margin-top: -247px;

  .hero {
    width: 165px;
    height: 145px;
    background: url("../images/r_dj.png");

    a {
      position: absolute;
      top: 37px;
      left: 12px;
      width: 88px;
      color: #62401b;
      font-weight: bold;
    }
  }

  .menus {
    position: absolute;
    width: 117px;
    left: 85px;

    li {
      position: relative;
      overflow: hidden;

      &:hover {
        overflow: visible;
      }

      &:first-child img {
        width: 117px;
        height: 117px;
        border: 3px solid #f3c258;
        box-sizing: border-box;
        display: block;
        /* 如果父元素中只有一个图片，会导致出现白边，解决方法：把图片变为块盒 */
      }

      > span {
        display: block;
        background: url("../images/spr2.png") no-repeat;
      }

      .weibo {
        background-position: -122px -120px;
        width: 117px;
        height: 38px;
      }

      .weixin {
        background-position: -122px -160px;
        width: 117px;
        height: 38px;
      }

      .sub-menu {
        position: absolute;
        width: 115px;
        height: 144px;
        left: -115px;
        top: -66px;
        text-align: center;
        color: #dcdcdc;
        font-size: 12px;
        background: url("../images/spr2.png") no-repeat 0 -416px;
        padding-top: 7px;

        span {
          color: #cd974c;
        }

        img {
          width: 100px;
        }
      }

      .master {
        background-position: -122px -417px;
        width: 117px;
        height: 38px;
      }
    }
  }
}
